
<template>
  <!--右侧开始-->
  <div>
    <div class="topSearch">
      <div class="leftBox" style="max-width:100%">
        <div class="searchbox">
            <em>学年：</em>
            <el-select v-model="select.xuenian" size="small" placeholder="请选择学年">
              <el-option v-for="(item,index) in select.yearList" :key="index" :label="item.timeName" :value="item.id"></el-option>
            </el-select>
          </div>
        <div class="searchbox">
          <em>缴费方案名称：</em>
          <el-select
            v-model="select.paymentSchemeId"
            @change="changeTName"
            size="small"
            filterable
            placeholder="请选择缴费方案名称"
          >
            <el-option
              v-for="item in select.paymentSchemeList"
              :key="item.projectId"
              :label="item.projectName"
              :value="item.projectId"
            ></el-option>
          </el-select>
        </div>

        <div class="searchbox">
          <em>缴费类型：</em>
          <el-select
            v-model="select.category"
            placeholder="输入学校名称"
            size="small"
            style="width:80px"
            clearable
          >
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in select.categoryList"
              :key="item.category"
              :label="item.categoryName"
              :value="item.category"
            ></el-option>
          </el-select>
        </div>

        <div class="searchbox">
          <em>校区：</em>
          <el-select
            v-model="select.schoolId"
            @change="changeSchool"
            placeholder="输入学校名称"
            size="small"
            width="80"
            clearable
          >
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in select.schoolList"
              :key="item.schoolId"
              :label="item.schoolName"
              :value="item.schoolId"
            ></el-option>
          </el-select>
        </div>

        <div class="searchbox">
          <em>年级：</em>
          <el-select
            v-model="select.gradeId"
            @change="changeGrade"
            placeholder="输入学校名称"
            size="small"
            style="width:80px"
            clearable
          >
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in select.gradeList"
              :key="item.gradeId"
              :label="item.gradeName"
              :value="item.gradeId"
            ></el-option>
          </el-select>
        </div>

        <div class="searchbox">
          <em>班级：</em>
          <el-select
            v-model="select.classId"
            placeholder="输入学校名称"
            size="small"
            :disabled="select.studentSource=='Sign'"
            style="width:80px"
            clearable
          >
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in select.classList"
              :key="item.classId"
              :label="item.className"
              :value="item.classId"
            ></el-option>
          </el-select>
        </div>

        <div class="searchbox">
          <em>学生姓名或身份证号：</em>
          <el-input
            v-model="select.nameOrIDNumber"
            style="width:180px;"
            placeholder="请输入学生姓名或身份证号"
            clearable
            size="small"
          ></el-input>
        </div>

        <!-- <div class="searchbox">
            <em>单据日期：</em>
            <el-date-picker v-model="select.dateB" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" :picker-options="pickerOptionsBegin" style="width:130px;" size="small"></el-date-picker>~
            <el-date-picker v-model="select.dateE" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" :picker-options="pickerOptionsEnd" style="width:130px;" size="small"></el-date-picker>
        </div>-->

        <div class="searchbox">
          <em>是否减免：</em>
          <el-radio-group v-model="select.isReduction" style="line-height: 40px;">
            <el-radio label>全部</el-radio>
            <el-radio label="Y">是</el-radio>
            <el-radio label="N">否</el-radio>
          </el-radio-group>
        </div>

        <div class="searchbox">
          <el-button type="primary" @click="getData" size="mini">查询</el-button>
          <el-button type="primary" @click="exportExcel" size="mini">导出</el-button>
        </div>
      </div>
      <!-- <div class="rightBox">
          <el-button type="primary" @click="exportExcel" size="mini">导出</el-button>
      </div>-->
      <div class="clear"></div>
    </div>

    <div class="contentBox" style="height:86%;">
      <el-table :data="data" :header-cell-style="headClass" border stripe style="width: 100%" height="90%">
        <el-table-column prop="projectName" label="缴费方案" width="180"></el-table-column>
        <!-- <el-table-column prop="paymentCategoryName" label="学生类型"></el-table-column> -->
        <el-table-column prop="schoolName" label="所在校区" width="200"></el-table-column>
        <el-table-column prop="graduateYear" label="毕业年份" width="120"></el-table-column>
        <el-table-column prop="studentName" label="学生姓名" width="120"></el-table-column>
        <el-table-column prop="identityCardNumber" label="身份证号" width="200"></el-table-column>
        <el-table-column prop="paymentCategoryName" label="学生类型" width="150"></el-table-column>
        <el-table-column prop="gradeName" label="就读年级"></el-table-column>
        <el-table-column label="就读班级">
          <template slot-scope="scope">
            <span
              v-if="scope.row.className==''||scope.row.className==null||scope.row.className==undefined"
            >未分班级</span>
            <span v-else>{{scope.row.className}}</span>
          </template>
        </el-table-column>
        <el-table-column label="缴费状态">
          <template slot-scope="scope">
            <span v-if="scope.row.paymentState=='UnPaid'||scope.row.paymentState==null">未缴费</span>
            <span v-if="scope.row.paymentState=='PaidUp'">已缴清</span>
            <span v-if="scope.row.paymentState=='UnPaidUp'">未缴清</span>
            <span v-if="scope.row.paymentState=='Refunded'">已退费</span>
          </template>
        </el-table-column>
        <el-table-column label="应缴金额">
          <template slot-scope="scope">
            <el-button type="text" @click="see(scope.row)" v-if="scope.row.payableMoney==''||scope.row.payableMoney==null||scope.row.payableMoney==undefined"
            >0.00</el-button>
            <el-button type="text" @click="see(scope.row)" :class="{fuFont:parseFloat(scope.row.payableMoney?scope.row.payableMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.payableMoney|moneyStyle}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="减免金额">
          <template slot-scope="scope">
            <span v-if="scope.row.tuitionMoney==''||scope.row.tuitionMoney==null||scope.row.tuitionMoney==undefined" style="color:#e8851e;"
            >0.00</span>
            <span :class="{fuFont:parseFloat(scope.row.tuitionMoney?scope.row.tuitionMoney:0).toFixed(2)*1000<0}" style="color:#e8851e;" v-else>{{scope.row.tuitionMoney|moneyStyle}}</span>
          </template>
        </el-table-column>
        <el-table-column label="实缴金额">
          <template slot-scope="scope">
            <span v-if="scope.row.paidMoney==''||scope.row.paidMoney==null||scope.row.paidMoney==undefined"
            >0.00</span>
            <span :class="{fuFont:parseFloat(scope.row.paidMoney?scope.row.paidMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.paidMoney|moneyStyle}}</span>
          </template>
        </el-table-column>
        <el-table-column label="差异">
          <template slot-scope="scope">
            <span :class="{fuFont:parseFloat(chayi(scope.row)).toFixed(2)*1000<0}">{{chayi(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="180"></el-table-column>
        <!-- <el-table-column label="各项目费用明细" width="180">
          <template slot-scope="scope">
            <el-button @click="see(scope.row)" type="primary" size="small">查看</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="paging">
        <el-pagination
          background
          layout="total, prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page.sync="pageIndex"
          :total="pageAll"
        ></el-pagination>
      </div>
    </div>

    <el-dialog title="各项费用明细" :visible.sync="dialogDetailed.show">
      <div class="layerBox">
        <div class="layerDetailedList">
          <dl v-for="d in dialogDetailed.data" :key="d.itemId">
            <dt>{{d.itemName}}</dt>
            <dd>{{d.money}}</dd>
          </dl>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="dialogDetailed.show=!dialogDetailed.show">确定</el-button>
      </div>
    </el-dialog>
  </div>
  <!--右侧结束-->
</template>

<script>
export default {
  name: "receivable",
  data() {
    return {
      pageIndex: 1,
      pageAll: 0,
      select: {
        xuenian:'',
        yearList:[],
        schoolList: [],
        schoolId: "",
        gradeList: [],
        gradeId: "",
        category: "",
        categoryList: [],
        classList: [],
        classId: "",
        paymentSchemeList: [],
        paymentSchemeId: [],
        name: "",
        nameOrIDNumber: "",
        isReduction: "",
        dateB: "",
        dateE: "",
        studentSource:''
      },
      pickerOptionsBegin: {
        disabledDate: time => {
          return time.getTime() > new Date(this.select.dateE).getTime();
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          return time.getTime() < new Date(this.select.dateB).getTime();
        }
      },
      data: [],
      dialogDetailed: {
        show: false,
        student: [],
        data: []
      }
    };
  },
  watch:{
    "select.xuenian":function(v){
      if(v){
        this.select.paymentSchemeId = "";
        this.select.schoolId = "";
        this.select.gradeId = "";
        this.data = [];
        this.getSearchP();
      }
    },
    "select.category":function(v){
      if(v){
        this.getData();
      }
    },
    "select.schoolId":function(v){
      if(v){
        this.getData();
      }
    },
    "select.gradeId":function(v){
      if(v){
        this.getData();
      }
    },
    "select.classId":function(v){
      if(v){
        this.getData();
      }
    }
  },
  filters: {
    moneyStyle(val) {
      var nm = 0;
      nm = parseFloat(val).toFixed(2);
      return nm;
    }
  },
  mounted() {
    var that = this;
    that.getSchoolYearList();
    // that.getSearchP();
    that.$nextTick(() => {
      setTimeout(function() {
        that.getData();
      }, 800);
    });
  },
  methods: {
    // 头部样式
    headClass:function(){
      return 'text-align: center;'
    },
    // 差异
    chayi: function(obg) {
      var numq = 0;
      numq =
        (parseFloat(obg.payableMoney == null ? 0 : obg.payableMoney) * 1000 -
          parseFloat(obg.tuitionMoney == null ? 0 : obg.tuitionMoney) * 1000 -
          parseFloat(obg.paidMoney == null ? 0 : obg.paidMoney) * 1000) /
        1000;
      return parseFloat(numq).toFixed(2);
    },
    // TODO:获取学年列表
    getSchoolYearList(){
      this.$api.systemSetup.GetSearchList("time").then(res=>{
        console.log("获取学年列表",res)
        this.select.yearList = res.data.result.timeList;
        this.select.xuenian = res.data.result.timeList[0].id;
        this.getSearchP();
      })
    },
    // TODO:搜索项目
    getSearchP(project) {
      this.$api.reportForm
        .GetSearch(
          "project",
          "003",
          this.select.xuenian,
          this.select.paymentSchemeId,
          this.select.schoolId,
          this.select.gradeId
        )
        .then(res => {
          //console.log("获取缴费项", res);
          this.select.paymentSchemeList = res.data.result.projectList;
          this.select.paymentSchemeId = res.data.result.projectList[0].projectId;
          this.select.studentSource = res.data.result.projectList[0].studentSource;
          this.getSearchS();
        });
    },
    // TODO:获取搜索学校
    getSearchS: function() {
      this.$api.reportForm
        .GetSearch(
          "school",
          "003",
          this.select.xuenian,
          this.select.paymentSchemeId,
          this.select.schoolId,
          this.select.gradeId
        )
        .then(res1 => {
          //console.log("获取学校列表", res1);
          this.select.schoolList = res1.data.result.schoolList;
          this.select.schoolId = res1.data.result.schoolList[0].schoolId;
          this.getSearchG();
          this.getData();
        });
    },
    //TODO: 获取搜索条件
    getSearchG: function() {
      this.$api.reportForm
        .GetSearch(
          "gradeAndCategory",
          "003",
          this.select.xuenian,
          this.select.paymentSchemeId,
          this.select.schoolId,
          this.select.gradeId
        )
        .then(res1 => {
          //console.log("获取年级缴费类型", res1);
          this.select.categoryList = res1.data.result.categoryList;
          this.select.gradeList = res1.data.result.gradeList;
        });
    },
    //TODO: 获取班级
    getSearchC: function() {
      this.$api.reportForm
        .GetSearch(
          "class",
          "003",
          this.select.xuenian,
          this.select.paymentSchemeId,
          this.select.schoolId,
          this.select.gradeId
        )
        .then(res1 => {
          //console.log("获取班级", res1);
          this.select.classList = res1.data.result.classList;
        });
    },
    // 缴费名称改变
    changeTName: function(event) {
      this.select.schoolId = "";
      for(var a=0,lenn = this.select.paymentSchemeList.length;a<lenn;a++){
        if(this.select.paymentSchemeList[a].projectId==event){
          this.select.studentSource = this.select.paymentSchemeList[a].studentSource;
        }
      }
      this.getSearchS();
    },
    // 学校改变
    changeSchool: function() {
      this.select.gradeId = "";
      this.getSearchG();
    },
    // 年级改变
    changeGrade: function() {
      this.select.classId = "";
      this.getSearchC();
    },
    getData: function() {
      var params = {
        projectId: this.select.paymentSchemeId,
        schoolId: this.select.schoolId,
        gradeId: this.select.gradeId,
        classId: this.select.classId,
        category: this.select.category,
        studentQuery: this.select.nameOrIDNumber,
        isTuition: this.select.isReduction
      };
      this.$api.reportForm
        .GetArrearList("list", params, this.pageIndex)
        .then(res => {
          //console.log("获取欠缴列表", res);
          this.data = res.data.result.list;
          this.pageIndex = res.data.result.page;
          this.pageAll = res.data.result.total;
          this.data.forEach(e=>{
            if(e.isResidence=="0"||e.isResidence.replace(/\s*/g,"")=="否"){
              e.payableMoney = (parseFloat(e.payableMoney).toFixed(2)*1000-parseFloat(e.boarderMoney).toFixed(2)*1000)/1000
            }
          })
        });
    },
    see(k) {
      this.$api.reportForm
        .WatchPaymentAmount(
          k.projectId,
          k.schoolId,
          k.sectionId,
          k.gradeId,
          k.studentId,
          k.paymentCategory,
          k.isResidence,
          k.isMilitaryTraining,
          k.isPhysicalExamination
        )
        .then(res => {
          //console.log("查看缴费项目请", res);
          this.dialogDetailed.data = res.data.result;
        });
      this.dialogDetailed.show = true;
    },
    exportExcel: function() {
      var params = {
        projectId: this.select.paymentSchemeId,
        schoolId: this.select.schoolId,
        gradeId: this.select.gradeId,
        classId: this.select.classId,
        category: this.select.category,
        studentQuery: this.select.nameOrIDNumber,
        isTuition: this.select.isReduction
      };
      this.$api.reportForm
        .GetArrearList("export", params, this.pageIndex)
        .then(res => {
          //console.log("导出欠缴列表", res);
          window.open(res.data.result);
        });
    },
    // 分页页面切换
    handleCurrentChange: function(val) {
      this.pageIndex = val;
      this.getData();
    }
  }
};
</script>

<style scoped>
</style>
